<template>
    <div class="ma-content-block lg:flex justify-between p-4">
      <!-- CRUD 组件 -->
      <ma-crud :options="options" :columns="columns" ref="crudRef" >
        <template #operationBeforeExtend="{ record }">
          <a-link @click="openShow(record,'')">账单明细</a-link>
        </template>
        <template #summaryCell="{ column, record, rowIndex }">
          <div>{{ column.dataIndex == "order_number" ? "合计" : record[column.dataIndex] }}</div>
        </template>
      </ma-crud>

      <a-drawer
        :footer="false"
        :width="1400"
        v-model:visible="visible"
        >
        <template #title> 账单详情 </template>
        <PayOrderList ref="payOrderRef"  />
      </a-drawer>
    </div>
  </template>
  <script setup>
  import { ref, reactive,nextTick } from 'vue'
  import financialPayOrder from '@/api/financial/financialPayOrder'
  import { Message } from '@arco-design/web-vue'
  import tool from '@/utils/tool'
  import * as common from '@/utils/common'
  import PayOrderList from "@/views/financial/payOrderDetail/index.vue"
  const crudRef = ref()
  const visible = ref()
  const payOrderRef = ref()
  const openShow = async (item) => {
    let obj = {pay_order_id:item.id}
    // 1  已支付  2 待支付  3 已退款
    
    // payOrderRef.value.open(item)
    visible.value = true
    await nextTick()
    payOrderRef.value.crudRef.requestParams = Object.assign(payOrderRef.value.crudRef.requestParams, obj)
    payOrderRef.value.crudRef.refresh()
  }


  const options = reactive({
    id: 'flyos_financial_pay_order',
    rowSelection: {
      showCheckedAll: true
    },
    pk: 'id',
    // autoRequest: false,
    operationColumn: true,
    operationWidth: 160,
    formOption: {
      viewType: 'modal',
      width: 600
    },
    showSummary: true,
    summary: [
		{
			dataIndex: "pay_price",
			action: "sum",
		},
		
	],
    api: financialPayOrder.getList,
    add: {
      show: false,
      api: financialPayOrder.save,
      auth: ['financial:payOrder:save']
    },
    edit: {
      show: false,
      api: financialPayOrder.update,
      auth: ['financial:payOrder:update']
    },
    delete: {
      show: false,
      api: financialPayOrder.deletes,
      auth: ['financial:payOrder:delete']
    },
    export: {
      show: true,
      url: 'financial/payOrder/export',
      auth: ['financial:payOrder:export']
    },
    // beforeRequest: (params) => {
    //   params.pay_type = 'periodic';
    //   params.pay_status = '1';
    // },
  })
  
  const columns = reactive([
    {
      title: "",
      dataIndex: "id",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      commonRules: {
        required: true,
        message: "请输入"
      }
    },
    {
      title: "交易单号",
      dataIndex: "order_number",
      formType: "input",
      width:200,
      search: true,
      align:'center'
    },
    {
      title: "关联订单",
      dataIndex: "prediction_order_number",
      formType: "input",
      width:200,
      search: true,
      align:'center'
    },
    {
      title: "客户名称",
      dataIndex: "dept_id",
      search: false,
      common: true,
      align:'center'
    },
    {
      title: "交易金额",
      dataIndex: "pay_price",
      align:'center',
      align:'center'
    },
    {
      title: "支付项目",
      dataIndex: "pay_items_json",
      formType: "input",
      hide: true,
      align:'center'
    },
    {
      title: "历史支付项目",
      dataIndex: "history_pay_items_json",
      formType: "input",
      hide: true,
      align:'center'
    },
    {
      title: "支付方式",
      dataIndex: "pay_type",
      formType: "select",
    //   search: true,
      align:'center',
      dict: {
        data: [
          {
            label: "现结",
            value: "now_pay"
          },
          {
            label: "周期结算",
            value: "periodic"
          },
          {
            label: "预付款",
            value: "money"
          }
        ],
        translation: true
      }
    },
    {
      title: "支付类型",
      dataIndex: "now_pay_type",
      formType: "select",
      search: true,
      align:'center',
      dict: {
        data: [
          {
            label: "惠支付",
            value: "1"
          },
          {
            label: "现金",
            value: "2"
          },
          {
            label: "对公转账",
            value: "3"
          }
        ],
        translation: true
      }
    },
    {
      title: "支付状态",
      dataIndex: "pay_status",
      formType: "select",
      search: true,
      align:'center',
      dict: {
        data: [
          {
            label: "已支付",
            value: "1"
          },
          {
            label: "未支付",
            value: "2"
          },
          {
            label: "已退款",
            value: "3",
          },
          {
            label: "已取消",
            value: "4",
          }
        ],
        translation: true
      }
    },
    {
      title: "支付日期",
      dataIndex: "pay_date",
      formType: "range",
      width:200,
      align:'center',
      search: true,
      showTime: true
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      width:200,
      align:'center',
      showTime: true
    },
    {
      title: "司机电话",
      dataIndex: "driver_order.deriver_mobile",
      formType: "input",
      width:200,
      align:'center',
    },
    {
      title: "司机名称",
      dataIndex: "driver_order.deriver_name",
      formType: "input",
      align:'center'
    },
    {
      title: "车牌号",
      dataIndex: "driver_order.deriver_car_no",
      formType: "input",
      width:200,
      align:'center'
    },
    {
      title: "装车单号",
      dataIndex: "driver_order.order_no",
      formType: "input",
      width:200,
      align:'center'
    },
    {
      title: "备注",
      dataIndex: "remark",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      align:'center'
    },
    // {
    //   title: "转账凭证",
    //   dataIndex: "transfer_voucher_images",
    //   formType: "upload",
    //   type: "image",
    //   multiple: true
    // },
    // {
    //   title: "凭证审核日期",
    //   dataIndex: "check_date",
    //   formType: "date",
    //   search: true,
    //   showTime: true
    // },
    {
      title: "修改时间",
      dataIndex: "updated_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "删除时间",
      dataIndex: "deleted_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "创建者",
      dataIndex: "created_by",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    },
    {
      title: "更新者",
      dataIndex: "updated_by",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    }
  ])
  
  defineExpose({
    crudRef
  })
  </script>
  <script> export default { name: 'financial:payOrder' } </script>
  